<script setup>
import TopButtonCenter from "@/components/Pengyq/TopButtonCenter.vue";
import { onBeforeMount, ref } from "vue";
import { getShopList, updateShopCommodity } from "@/server/api/shopApi.js";
import { useUseStore } from "@/stores/user";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const useStore = useUseStore();
const router = useRouter();
const ShopList = ref([]);
const limit = 60;
const page = 1;

const isclick = ref(false);
const maskIsShow = ref(false);
const ind = ref();
// 点击Confirm按钮
const back = () => {
  isclick.value = true;
  setTimeout(() => {
    router.back();
  }, 200);
};

function getShopListFun(l, p, u) {
  getShopList(l, p, u).then((data) => {
    ShopList.value = data.data.data.list;

    // ShopList.value.forEach((item) => {
    //   if (item.userImage != null) {
    //     let ImgList = item.userImage.split(".");
    //     item.userImage = useStore.ing + ImgList[0] + "_90_100." + ImgList[1];
    //   }
    // });

    return {
      ShopList,
    };
  });
}

// 根据shopId查询指定实体店还可以上传的商品数量
const getShopPublishCount = async (shopId, styleId) => {
  const res = await updateShopCommodity(shopId);
  if (res.data.data == 0) {
    maskIsShow.value = true;
  } else {
    if (styleId == "fwefw" || styleId == "sdfsd" || styleId == "dfssd") {
      router.push({
        path: `/hotelMerchandise`,
        query: {
          data: ShopList.value[ind.value].shopId,
        },
      });
    } else {
      router.push({
        path: `/PersonalPostingShop`,
        query: {
          data: ShopList.value[ind.value].shopId,
        },
      });
    }
  }
};

const RouterLIn = (shopId, index, styleId) => {
  ind.value = index;
  getShopPublishCount(shopId, styleId);
};
onBeforeMount(() => {
  getShopListFun(limit, page, useStore.userId);
});
</script>

<template>
  <TopButtonCenter :title="$t('me.PersonalPosting.shop.manage.select')" />

  <div class="ManageShopList">
    <ul class="list">
      <li @click="RouterLIn(i.shopId, index, i.categoryId)" v-for="(i, index) in ShopList" :key="index">
        <header>
          <div class="leftSide">
            <div class="login">
              <img v-lazy="i.userImage" alt="" />
            </div>
            <div class="right_tex">
              <h5>{{ i.shopName }}</h5>
              <div class="totol">
                <span> {{ i.follows }} {{ $t("item.details.fans") }} </span>
                {{ i.score }}
                <van-rate v-model="i.score" :size="15" :count="i.score ? Number(String(i.score)[0]) : 0" color="#ffd21e"
                  void-icon="star" void-color="#eee" readonly />
              </div>
            </div>
          </div>
          <div class="rightSide">
            <img src="/images/click.png" />
          </div>
        </header>
      </li>
    </ul>
  </div>
  <div class="msk" v-show="maskIsShow">
    <div class="box">
      <div class="title">The quantity has reached its limit</div>
      <div class="comfirm" :class="{ addBgc: isclick }" @click="back()">
        Confirm
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ManageShopList {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .list {
    li {
      header {
        margin-bottom: 30rem;
        display: flex;
        padding: 10rem 0;
        border-bottom: 1rem solid #d2d2d2;

        .leftSide {
          display: flex;

          .right_tex {
            line-height: 35rem;
            margin: 0 10rem;

            >h5 {
              font-size: 16rem;
              font-weight: 500;
            }

            .totol {
              color: #d2d2d2;
            }
          }

          .login {
            width: 70rem;
            height: 70rem;
            overflow: hidden;
            border-radius: 50%;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .rightSide {
          margin-left: auto;
          padding-right: 10px;

          img {
            width: 30rem;
            height: 40rem;
          }
        }
      }
    }
  }
}

.msk {
  background-color: rgba(73, 73, 73, 0.404);
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  .box {
    position: absolute;
    background-color: rgb(255, 255, 255);
    border-radius: 16rem;
    top: calc((100vh - 120rem) / 2);
    left: calc((100vw - 250rem) / 2);
    width: 250rem;
    height: 140rem;

    .title {
      height: 90rem;
      width: 250rem;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20rem;
      border-bottom: 1rem solid #ddd;
      color: rgb(100, 46, 142);
      text-align: center;
    }

    .comfirm {
      width: 100%;
      font-size: 18rem;
      color: rgb(153, 153, 153);
      height: 50rem;
      line-height: 50rem;
      text-align: center;
      border-radius: 0 0 16rem 16rem;
    }
  }
}

.addBgc {
  background-color: #ddd;
}
</style>
